/**
 * Created by sunguodong on 2021/12/30.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapLevel: React.FC = () => {

    function componentDid() {
		esriLoader.loadModules([
			'esri/map',
			"esri/geometry/webMercatorUtils", 
		]).then(([Map, webMercatorUtils]) => {
			const map = new Map('mapCon', {
				basemap: 'topo-vector',
				center: [-122.45, 37.75],
				// zoom: 13,
				maxZoom:19,//最大空间等级
    			minZoom:5,//最小空间等级
				logo: false, // 不显示esri的logo
			});
			// 设置地图层级
			map.setLevel(10);
			// var scale = map.getLevel();
			// console.log(scale);
			map.on("click", function (event: any) {
				console.log(event);
				// 中心点
				console.log("x:" + event.mapPoint.x);
				console.log("y:" + event.mapPoint.y);
				// 点击位置的坐标
				console.log("longitude:" + event.screenPoint.x);
				console.log("latitude:" + event.screenPoint.y);
			});
			// 获取地图中心点坐标
            function getCenterPoint()
            {
                return map.extent.getCenter();
            }
			map.on("extent-change", function(){
				// 获取监听地图层级
                var scale = map.getLevel();
			    console.log(scale);
                
                var point = getCenterPoint();
                
                var newPoint = webMercatorUtils.webMercatorToGeographic(point);
                
                console.log("current map center point is x: " + point.getLatitude() + ", y: " + point.getLongitude());
                console.log("current map center is x: " + newPoint.x + ", y: " + newPoint.y);
            });
			// 监听鼠标移动时的坐标
			map.on("mouse-move", showCoordinates);
            function showCoordinates(evt: any)
            {
                var mp = evt.mapPoint;
                console.log('111', mp);
                // $(document).ready(function () {
                //     $("#info").text(mp.x.toFixed(4)+","+mp.y.toFixed(4));
                // })
            }
		}).catch(err => {
			console.error(err)
		})
	}

	useEffect(() => {
		return componentDid();
	}, []);

	function componentWillUn() {

	}

	useEffect(() => () => {
		return componentWillUn();
	}, []);

  	return (
		<div>
			<div id="mapCon"></div>
		</div>
	)
}
